main {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.left {
    width: 45%;
    height: 100%;
    background-color: rgb(143, 0, 0);
    display: grid;
    place-items: center;
}

.right {
    width: 55%;
    height: 100%;
}

.register {
    width: 100%;
    height: 5%;
    // background-color: #7a4040;
    display: grid;
    grid-template-columns: 97% 3%;
    align-items: center;
    justify-items: end;
    a {
        cursor: pointer;
        color: #800000;
    }
}

.login {
    width: 100%;
    height: 95%;
    display: grid;
    place-items: center;
}

.loginBox {
    width: 400px;
    height: 500px;
    display: grid;
    grid-template-rows: 30% 50% 20%;

    // background-color: #50adcf;
    header {
        width: 400px;
        display: grid;
        place-items: center;

        h5 {
            color: #808080;
        }
    }

    ;

    .loginForm {
        // background-color: #5ccf50;
        width: 280px;
        justify-self: center;
        align-self: start;
        padding-top: 20px;
        display: grid;

        .el-input {
            height: 40px;
        }

        ;

        :deep(.el-input__inner:focus) {
            border-color: #ffffff00;
        }

        ;

        .loginBoutton {
            width: 280px;
            height: 40px;
            justify-self: center;
            border: #800000;
            font-size: medium;
            color: #ffffff;
        }

        ;
    }

    ;

    footer {
        width: 400px;
        border-top: 1px solid #dbdbdb;
        display: grid;
        place-items: center;

        .footer-box {
            width: 280px;
            height: 50%;
            // background-color: #d22a2a;

            display: grid;
            grid-template-columns: repeat(3, 33.33%);
            place-items: center;

            img {
                height: 30px;
                width: 30px;

                cursor: pointer;
            }
        }
    }
}